<template>
  <Dialog v-model="dialogVisible" title="闲置概览-分类品"> 
    <el-table :data="leaveUnusedTable" style="width: 100%" header-cell-class-name="headerClass" :height="200">
      <el-table-column prop="substanceName" label="物质名称" />
      <el-table-column prop="countValue" label="数量" />
      <el-table-column prop="originalValue" label="原值(万元)" />
      <el-table-column prop="netValue" label="净值(万元)" />
      <el-table-column prop="trandDesc" label="趋势" width="200px" >
        <template #default="scope">
            <div :class="['item-desc', scope.row.isIncrease ?'increase':'']">
              <el-icon v-if="scope.row.isIncrease"><Top /></el-icon>
              <el-icon v-else><Bottom /></el-icon>   {{ scope.row.trandDesc }}
            </div>
          </template>
        </el-table-column>
    </el-table>
  </Dialog>
</template>
<script setup lang="ts">
import { Top, Bottom } from '@element-plus/icons-vue'
import {leaveUnusedTable} from '../../index'
defineOptions({ name: 'repDialogMore' })
const dialogVisible = ref(false)
const open = async () => {
  dialogVisible.value = true
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
 :deep( .headerClass){
   background-color: #EFF3FE !important;
}

.item-desc{
     font-size: 16px; 
     color: #2ED016;
  } 

  .item-desc.increase{
    color:#D01616
    
  }
</style>
